<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="80%"
    top="10px"
  >
    <!-- :rules="dataRule" -->
    <el-form
      :model="dataForm"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-card class="article-card">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="工号">{{dataForm.userId}}</el-form-item>

            <el-form-item label="入职时间">{{dataForm.createTime}}</el-form-item>

            <el-form-item label="等级">
              <el-rate v-model="dataForm.grade" text-color="#ff9900" score-template="{value}"></el-rate>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="用户名">
              <el-input v-model="dataForm.userName"></el-input>
            </el-form-item>

            <el-form-item label="邮箱">
              <el-input v-model="dataForm.email"></el-input>
            </el-form-item>

            <el-form-item label="手机号">
              <el-input v-model="dataForm.mobile"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <el-form-item label="生日">
              <el-input v-model="dataForm.birthday"></el-input>
            </el-form-item>

            <el-form-item label="部门">
              <el-cascader :options="departmentOptions" v-model="dataForm.deptId"></el-cascader>
            </el-form-item>

            <el-form-item label="评分">
              <el-input-number v-model="dataForm.rate"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="角色">
              <el-checkbox-group v-model="dataForm.roleIdList" size="mini">
                <el-checkbox
                  border
                  v-for="role in roleOption"
                  :label="role.id"
                  :key="role.id"
                >{{role.value}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="article-card">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="课程">
              <el-transfer v-model="dataForm.courseList" :data="courseOptionList"></el-transfer>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="照片">
              <el-upload
                drag
                action=""
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>

              <el-card :body-style="{ padding: '0px' }" style="width:80px;">
                <img :src="dataForm.headerImage" class="image">
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>

      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      roleOption: [],
      departmentOptions: [],
      courseOptionList: [],
      dataForm: {
        id: 0,
        userId: 0,
        userName: '',
        email: '',
        mobile: '',
        birthday: '',
        status: 0,
        deptId: [],
        roleIdList: [],
        grade: '',
        rate: 0,
        courseList: [],
        headerImage: '',
        createTime: '',
        sort: 0
      }
    }
  },
  methods: {
    init (id) {
      this.dataForm.id = id
      // 课程选项
      this.$http.request(this.api.exampleCoursesList).then(res => {
        console.log(res)
        this.courseOptionList = res.data
      }).then(() => {
        // 获取角色选项
        this.$http.request(this.api.exampleRolesList).then(res => {
          console.log(res)
          this.roleOption = res.data
        }).then(() => {
          // 获取部门选项
          this.$http.request(this.api.exampleDepartmentsList).then(res => {
            console.log(res)
            this.departmentOptions = res.data
          }).then(() => {
            // 获取表格数据中的一行
            this.$http.request(this.api.exampleGridInfo + '?id=' + this.dataForm.id).then(res => {
              console.log(res)
              this.dataForm = res.data
              this.visible = true
              // this.$nextTick(() => {
              //   this.$refs['dataForm'].resetFields()
              // })
            })
          })
        })
      })

      // this.$http({
      //   url: this.$http.adornUrl('/sys/role/select'),
      //   method: 'get',
      //   params: this.$http.adornParams()
      // }).then(({ data }) => {
      //   this.roleList = data && data.code === 0 ? data.list : []
      // }).then(() => {
      //   this.visible = true
      //   this.$nextTick(() => {
      //     this.$refs['dataForm'].resetFields()
      //   })
      // }).then(() => {
      //   if (this.dataForm.id) {
      //     this.$http({
      //       url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
      //       method: 'get',
      //       params: this.$http.adornParams()
      //     }).then(({ data }) => {
      //       if (data && data.code === 0) {
      //         this.dataForm.userName = data.user.username
      //         this.dataForm.salt = data.user.salt
      //         this.dataForm.email = data.user.email
      //         this.dataForm.mobile = data.user.mobile
      //         this.dataForm.roleIdList = data.user.roleIdList
      //         this.dataForm.status = data.user.status
      //       }
      //     })
      //   }
      // })
    },
    // 表单提交
    dataFormSubmit () {
      console.log(this.dataForm)
      // this.$refs['dataForm'].validate((valid) => {
      //   console.log(this.dataForm)
      //   if (valid) {
      //     this.$http({
      //       url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),
      //       method: 'post',
      //       data: this.$http.adornData({
      //         'userId': this.dataForm.id || undefined,
      //         'username': this.dataForm.userName,
      //         'password': this.dataForm.password,
      //         'salt': this.dataForm.salt,
      //         'email': this.dataForm.email,
      //         'mobile': this.dataForm.mobile,
      //         'status': this.dataForm.status,
      //         'roleIdList': this.dataForm.roleIdList
      //       })
      //     }).then(({ data }) => {
      //       if (data && data.code === 0) {
      //         this.$message({
      //           message: '操作成功',
      //           type: 'success',
      //           duration: 1500,
      //           onClose: () => {
      //             this.visible = false
      //             this.$emit('refreshDataList')
      //           }
      //         })
      //       } else {
      //         this.$message.error(data.msg)
      //       }
      //     })
      //   }
      // })
    }
  }
}
</script>

<style scoped>
.article-card {
  margin-bottom: 10px;
}
.image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>
